<template>

    <div>
        <div class="time">统计截止:{{ WomWorld.lastUpdateTime }}</div>
        <div class="box">
            <van-row>
                <van-col span="6">
                    <p>较昨日<span class="num">{{ WomWorld.nowConfirmAdd |num }}</span></p>
                    <p class="num big">{{ WomWorld.nowConfirm }}</p>
                    <strong>现存确诊</strong>
                </van-col>
                <van-col span="6">
                    <p>较昨日<span class="num">{{ WomWorld.confirmAdd |num }}</span></p>
                    <p class="num big">{{ WomWorld.confirm }}</p>
                    <strong>累计确诊</strong>
                </van-col>
                <van-col span="6">
                    <p>较昨日<span class="num">{{ WomWorld.healAdd |num }}</span></p>
                    <p class="num big">{{ WomWorld.heal }}</p>
                    <strong>累计治愈</strong>
                </van-col>
                <van-col span="6">
                    <p>较昨日<span class="num">{{ WomWorld.deadAdd |num }}</span></p>
                    <p class="num big">{{ WomWorld.dead }}</p>
                    <strong>现存死亡</strong>
                </van-col>
            
        </van-row>

        </div>

        <div class="title">海外疫情</div>
        <div class="wrapper">
            <div class="th">
                <van-sticky>
                    <van-row>
                        <van-col span="4">地区</van-col>
                        <van-col span="5">新增确诊</van-col>
                        <van-col span="6">累计确诊</van-col>
                        <van-col span="6">治愈</van-col>
                        <van-col span="3">死亡</van-col>
                    </van-row>
                </van-sticky>
              
            </div>
            <div class="list">
                <!-- 渲染内容 -->
                <van-row v-for="(item,index) in WomAboard" :key="index">
                    <van-col span="4" class="left">{{ item.name }}</van-col>
                    <van-col span="5">{{ item.confirmAdd }}</van-col>
                    <van-col span="6">{{ item.confirm }}</van-col>
                    <van-col span="6">{{ item.heal }}</van-col>
                    <van-col span="3">{{ item.dead }}</van-col>
                </van-row>
            </div>
        </div>
    </div>

</template>
  
<script>
    
    export default{
        data(){
            return{
                WomWorld:{},
                WomAboard:[]
        }
    },
        created(){
            this.$api.getNewsWorld()
            .then(res=>{
                console.log('----海外疫情----',res.data);
                this.WomWorld = res.data.data.WomWorld;
                this.WomAboard = res.data.data.WomAboard
            })
        },
        filters:{
            num(val){
                return val = val>0? '+' + val:val;
            }
        }
    }

</script>


<style lang="less" scoped>
.time{
    margin: 0.24rem;
    font-size: 0.2rem;
    color: #666;
}
  .box{
    margin:0.2rem,0.3rem;
    text-align: center;
    .van-col{
            margin-bottom: 0.2rem;
            font-size: 0.2rem;
        }
        .big{
            font-size: 0.28rem;
            font-weight: bold;
        }
        .van-col:nth-child(1){
            .num{
                color: red;
            }
        }
        .van-col:nth-child(2){
            .num{
                color: green;
            }
        }
        .van-col:nth-child(3){
            .num{
                color: rgb(127, 127, 13);
            }
        }
        .van-col:nth-child(4){
            .num{
                color: purple;
            }
        }
  }
  .title{
    margin: 0.2rem;
    font-size: 0.3rem;
    font-weight: bold;
  }
  .wrapper{
    margin: 0.2rem;
    .van-row{
        text-align: center;
        // line-height: 0.8rem;
        display: flex;
        align-items: center;
        min-height: 0.8rem;
        font-size: 0.24rem;
        color: #333;
    }
    .list{
        .left{
            text-align: left;
            padding-left: 0.1rem;
            // height: 0.8rem;
        }
        .van-row{
            border-bottom: 1px solid #eee;
        }
    }
    .th{
        .van-col{
            min-height: 0.8rem;
            line-height: 0.8rem;
        }
        .van-col:nth-child(1){
            background: rgb(184, 166, 166);
        }
        .van-col:nth-child(2){
            background: rgb(126, 164, 213);
        }
        .van-col:nth-child(3){
            background: rgb(232, 147, 147);
        }
        .van-col:nth-child(4){
            background: rgb(110, 202, 141);
        }
        
        .van-col:nth-child(5){
            background: rgb(105, 99, 99);
        }
    }

  }
</style>
  